@import com.fasterxml.jackson.databind.JsonNode
@(fp: JsonNode, tabHtmlDifferences : JsonNode, startDate : JsonNode, endDate: JsonNode, firstDate: String, currentDate: String)

@header = {
    <script type="text/javascript" src="@routes.Assets.at("timelinejs/js/storyjs-embed.js")"></script>
    <script type="text/javascript" src="@routes.Assets.at("javascripts/diffStrings.js")"></script>
    <script type="text/javascript" src="@routes.Assets.at("javascripts/canvasCompare.js")"></script>

    <script type="text/javascript">

        $( document ).ready(function() {

            var ok = true;
            var timelineLaunched = false;
            var nbLoaded = 0;
            var counterCanvas = 1;

            var data = $.parseJSON('@Html(tabHtmlDifferences.toString)');
            var startDates = $.parseJSON('@Html(startDate.toString)');
            var endDates = $.parseJSON('@Html(endDate.toString)');

            date = [];
            era = [];
            counter = 1;

            for(key in data){

                date.push({
                    "startDate":startDates[key],
                    "headline":"@Messages("timeline.evo1") n°"+counter+" @Messages("timeline.evo2") n°"+(counter+1),
                    "text": '<table class="table table-striped table-hover timeTable"><tbody><tr class="legend"><th>@Messages("timeline.attribute")' +
                     '</th><th>@Messages("timeline.before")</th><th>@Messages("timeline.after")</th><th>@Messages("timeline.diff")</th>'+
                                data[key]+'</tbody></table>'
                });
                if(endDates[key] != undefined){
                    era.push({
                        "startDate": startDates[key],
                        "endDate": endDates[key],
                        "headline": "@Messages("timeline.fp") n°"+(counter+1)
                    });
                } else {
                    era.push({
                        "startDate": startDates[key],
                        "endDate": '@currentDate',
                        "headline": "@Messages("timeline.fp") n°"+(counter+1)+ " @Messages("timeline.current")"
                    });
                }

                if(counter == 1){
                    era.push({
                        "startDate": '@firstDate',
                        "endDate": startDates[key],
                        "headline": "@Messages("timeline.fp") n°1"
                    });
                }

                counter++;
            }

            if(document.location.hash == "#fp"){
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    if(!timelineLaunched){
                        displayTimeline(date, era);
                        timelineLaunched = true;
                    }
                });
            } else {
                displayTimeline(date,era);
            }

            setTimeout(calculateDiff,2000);

            function calculateDiff(){
                $(".timeTable tr").each(function(i, row){
                    var $row = $(this);
                    colAttribute = $row.find(' :nth-child(1)').text();
                    colBefore = $row.find(':nth-child(2)').text();
                    colAfter = $row.find(':nth-child(3)').text();
                    if(colAttribute != "Attribute" && colAttribute != "Attribut"){
                        if(colAttribute === "pluginsJs"){
                          var pluginsParsedBefore = colBefore.split("Plugin ");
                          var pluginsParsedAfter = colAfter.split("Plugin ");

                          var pluginsBefore = new Array();
                          for(var i = 1; i < pluginsParsedBefore.length; i++){
                            pluginsBefore[i-1] = pluginsParsedBefore[i].split(": ")[1]+' ';
                          }

                          var pluginsAfter = new Array();
                          for(var i = 1; i < pluginsParsedAfter.length; i++){
                            pluginsAfter[i-1] = pluginsParsedAfter[i].split(": ")[1]+"  ";
                          }

                          colBefore = pluginsBefore.toString();
                          colAfter = pluginsAfter.toString();

                          $row.find(':nth-child(2)').html(colBefore);
                          $row.find(':nth-child(3)').html(colAfter);
                        }


                        //We search the differences between the 2 strings
                        var dmp = new diff_match_patch();
                        var a = dmp.diff_linesToWords_(colBefore+" ", colAfter+" ");

                        var lineText1 = a['chars1'];
                        var lineText2 = a['chars2'];
                        var lineArray = a['lineArray'];

                        if(colAttribute != "canvasJs") {
                            diff = dmp.diff_main(lineText1, lineText2, false);
                            dmp.diff_charsToLines_(diff, lineArray);
                            if(colBefore.lastIndexOf("Flash", 0) === 0){
                            $row.find(':nth-child(4)').html('<del style="background:#ffe6e6;">@Messages("timeline.noFlash") </del><ins style="background:#e6ffe6;">'+colAfter+'</ins>');
                            }else if(colAfter.lastIndexOf("Flash", 0) === 0){
                                $row.find(':nth-child(4)').html('<del style="background:#ffe6e6;">'+colBefore+'</del><ins style="background:#e6ffe6;">@Messages("timeline.noFlash") </ins>');
                            }else{
                                $row.find(':nth-child(4)').html(dmp.diff_prettyHtml(diff));
                            }
                        } else {
                            ok = false;
                            var canvas1 = document.createElement("canvas");
                            var canvas2 = document.createElement("canvas");
                            var img1 = document.getElementById("img"+counterCanvas);
                            var img2 = document.getElementById("img"+(counterCanvas+1));
                            $row.find(':nth-child(4)').html('<img id="diffImg'+counterCanvas+'">');
                            var diffImg = document.getElementById("diffImg"+counterCanvas);
                            counterCanvas += 2;

                            canvas1.id = "cvs1";
                            canvas1.width = img1.naturalWidth;
                            canvas1.height = img1.naturalHeight;
                            var ctx1 = canvas1.getContext("2d");
                            var imgCvs1 = new Image();
                            imgCvs1.onload = function() {
                                ctx1.drawImage(imgCvs1, 0, 0);
                                nbLoaded++;
                            };
                            imgCvs1.src = img1.src;

                            canvas2.id = "cvs2";
                            canvas2.width = img1.naturalWidth;
                            canvas2.height = img1.naturalHeight;
                            var ctx2 = canvas2.getContext("2d");
                            var imgCvs2 = new Image();
                            imgCvs2.onload = function() {
                                ctx2.drawImage(imgCvs2, 0, 0);
                                nbLoaded++;
                            };
                            imgCvs2.src = img2.src;

                            finishCallback(canvas1,canvas2,diffImg);

                        }
                    }
                });
            }

            function finishCallback(canvas1,canvas2,diffImg){
                if (nbLoaded < 2) {
                    setTimeout(function() {
                        finishCallback(canvas1,canvas2,diffImg);
                    }, 100);
                } else {
                    var canvasDiff = compareCanvas(canvas1, canvas2);
                    diffImg.src= canvasDiff.toDataURL();
                }
                ok = true;
            }

            function displayTimeline(date, era){
                if(ok != true){
                     setTimeout(function() {
                        displayTimeline(date,era);
                    }, 100);
                }else{

                    createStoryJS({
                        type:       'timeline',
                        lang:       '@Messages("timeline.lang")',
                        width:      '100%',
                        height:     '600',
                        source:     { "timeline":
                                        {
                                            "headline":"@Messages("timeline.headline")",
                                            "type":"default",
                                            "text":"@Html(Messages("timeline.text"))",
                                            "date": date,
                                            "era": era
                                        }
                                    },
                        embed_id:   'my-timeline',
                        start_zoom_adjust:  '0',
                        hash_bookmark:      true
                    });

                }
            }

        });

    </script>

}
@footer = {
    <script type="text/javascript">
    if (document.location.hash) {
        var hash = document.location.hash;
        $('.nav-tabs a[href='+hash+']').tab('show');
    }
    </script>
    <style type="text/css">
        /* Fix for Firefox images */
        img{
            width: 100% !important;
        }
    </style>
}

@main(header, footer, "/timeline") {
    <h2 class="text-center">@Messages("timeline.title")</h2>

    <ul class="nav nav-tabs" role="tablist">
        <li ><a class="colored-tabs" href="#timeline" role="tab" data-toggle="tab">@Messages("timeline.menu1")</a></li>
        <li><a id="fpTab" class="colored-tabs" href="#fp" role="tab" data-toggle="tab">@Messages("timeline.menu2")</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade in active text-center" id="timeline">
            <br>
            <div id="my-timeline"></div>
        </div>
        <div class="tab-pane fade" id="fp">
            <br>
            @timelineTable(fp)
        </div>
    </div>
}